<template>
  <section class="app-container">
      <search-bar :search="searchParams" @on-search="search">
        <el-form :model="searchParams" inline >
          <el-row>
            <el-col :span="8">
              <el-form-item label="采购订单">
                <el-input clearable v-model="searchParams.relationOrderNo" placeholder="采购订单号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="退货类型">
                <el-select  clearable v-model="searchParams.returnType"  placeholder="请选择">
                  <el-option v-for="(item,index) in returnTypes" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="退货状态">
                <el-select v-model="searchParams.status" placeholder="请选择">
                  <el-option v-for="(item,index) in returnStatus" :key="index"  :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="商定退货日期">
                <Date-picker align="left"   v-model="searchParams" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </search-bar>
      <div>
       <el-button type="success" @click="toCreate" icon="wp wp-icon-save">新建采购退货单</el-button>
      </div>
      <page-table
        :WP_MaxHeight="370"
        :WP_CurrentPage="currentPage"
        :WP_PageSize="pageSize"
        :WP_List="list"
        :WP_TotalRow="totalRow"
        :WP_Loading="loading"
      >
      <el-table-column label="退货单号" prop="returnNo">
           <template  slot-scope="scope"><el-link type="primary" @click="toDetail(scope.row)">{{scope.row.returnNo}}</el-link></template>
      </el-table-column>
      <el-table-column label="退货类型" prop="returnTypeName"></el-table-column>
      <el-table-column label="采购订单" prop="relationOrderNo"></el-table-column>
      <el-table-column label="退货经销商" prop="relationName" width="120" show-overflow-tooltip></el-table-column>
      <el-table-column label="退货总金额" prop="returnTotalAmount">
          <template  slot-scope="scope">{{scope.row.returnTotalAmount || "--" }}</template>
      </el-table-column>
      <el-table-column label="商定退货日期" width="120" prop="returnDate">
        <template slot-scope="scope">
          {{scope.row.returnDate | FormatDate('yyyy-MM-dd') }}
        </template>
      </el-table-column>
      <el-table-column label="退货订完成时间" width="120" show-overflow-tooltip prop="returnCompletionDate">
           <template  slot-scope="scope">{{scope.row.returnCompletionDate | FormatDate('yyyy-MM-dd HH:mm:ss') || "--" }}</template>
      </el-table-column>
      <el-table-column label="退货状态" prop="statusName">
      </el-table-column>
      <el-table-column label="创建时间"  show-overflow-tooltip prop="createTime"></el-table-column>
      <el-table-column label="更新时间"  show-overflow-tooltip prop="updateTime"></el-table-column>
      </page-table>
        <DetailPanel  type='purchaseOrder' :param="rowInfo" title="采购退货单"  @refreshList="refreshList" :visible.sync="visibleDetailPanel"/>
        <CreatePanel  type='purchaseOrder' title="新建采购退货单" @afterSave="search" :visible.sync="visibleCreatePanel"/>
  </section>
</template>

<script>
import SearchBar from '@/components/SearchBar'
import PageTable from '@/components/PageTable'
import DatePicker from '@/components/DatePicker'
import Mixins from './mixins'
import CreatePanel from './components/CreatePanel'
import DetailPanel from './components/DetailPanel'
export default {
  components: {SearchBar, PageTable, DatePicker, CreatePanel, DetailPanel},
  mixins: [Mixins],
  data () {
    return {
      id: 'purchaseOrderReturn'
    }
  },
  mounted () {
    this.refreshList()
  },
  methods: {
    refreshList () {
      this.search(this.searchParams)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
